<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>注册网易免费邮箱 - 中国第一大电子邮件服务商</title>
	<link rel="shortcut icon" href="http://mail.163.com/favicon.ico">
	<link rel="stylesheet" type="text/css" href="assets/css/main.css">

	<style type="text/css">
		header,footer,section,aside,article,nav,hgroup,figure,figcaption,details,
		    summary{
		    	display:block;margin:0;padding:0;border:none}
		    time,mark,ruby,rt,rp,output,keygen,meter,progress,command,source{
		    	text-decoration:none;font-style:normal;font-weight:normal}
	</style>


	
</head>
<body>
	<header class="header">

		<div class="bg"></div>

		<div class="links">
			<a href="#">了解更多</a>
			<span></span>
			<a href="#">反馈意见</a>
		</div>

	</header>
    <section class="content">
    	<!--内容区头-->
    	<header class="content-tit">
    	<h1>欢迎注册无限量的网易邮箱！邮件地址可以登录使用其他网易旗下产品</h1>
    </header>
    <!--内容区体-->
    <div class="mainBody-wp">
    	<!--左边表单内容区-->
    	<div class="mainBody">
    		<!--tab菜单-->
    		<div class="regTabs">
    			<ul>
    				<li><a href="#">注册字母邮箱</a></li>
    				<li><a href="#">注册手机号码邮箱</a></li>
                    <li><a href="#">注册VIP邮箱</a></li>

    			</ul>
    		</div>
            <!--表单内容区-->
            <div class="regForm">


                <!--每一个dl 都是一个输入项-->
                <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit">
                        <span class="txt-impt">*</span>
                        邮件地址
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 196px;"/>
                       <strong style="font-size: 14px;font-weight: 200px;">@</strong>
                       <select>
                           <option selected="selected">163.com</option>
                           <option>126.com</option>
                           <option>yeah.netk</option>
                       </select>
                       <div class="tips">
                            <span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
                        </div>
                    </dd>
                </dl>
                

                <!--每一个dl 都是一个输入项-->
                <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit">
                        <span class="txt-impt">*</span>
                        密码
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 322px;"/>
                        <div class="tips">
                            <span class="txt-tips">6~16个字符，区分大小写</span>
                        </div>
                    </dd>
                </dl>

                <!--每一个dl 都是一个输入项-->
                <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit">
                        <span class="txt-impt">*</span>
                        确认密码
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 322px;"/>
                        <div class="tips">
                            <span class="txt-tips">请再次确认密码</span>
                        </div>
                    </dd>
                </dl>
                
                 <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit">
                        <span class="txt-impt">*</span>
                        手机号码
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input id='phone' type="text" class="ipt" style="width: 322px;
                      padding-left: 36px;" value="+86" />

                      <div class="select_panel" style="display: none;">
                      	<a href="#" class="flag-CN"><em></em>中国 +86</a>
                        <a href="#" class="flag-AL"><em></em>阿尔巴尼亚(Shqipëria) +355</a>
                        <a href="#" class="flag-DZ"><em></em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>
                        <a href="#" class="flag-AF"><em></em>阿富汗(Republic of Afghanistan) +93</a>
                        <a href="#" class="flag-AR"><em></em>阿根廷(Argentina) +54</a>
                        <a href="#" class="flag-AE"><em></em>阿拉伯联合大公国(The United Arab Emirates) +971</a>
                        <a href="#" class="flag-AW"><em></em>阿鲁巴(Aruba) +297</a>
                        <a href="#" class="flag-OM"><em></em>阿曼(Sultanate of Oman) +968</a>
                        <a href="#" class="flag-AZ"><em></em>阿塞拜疆(Azərbaycan) +994</a>
                        <a href="#" class="flag-EG"><em></em>埃及(The Arab Republic of Egypt) +20</a>
                        <a href="#" class="flag-ET"><em></em>埃塞俄比亚(Ityop'iya) +251</a>
                        <a href="#" class="flag-IE"><em></em>爱尔兰(Ireland) +353</a>
                        <a href="#" class="flag-EE"><em></em>爱沙尼亚(Eesti) +372</a>
                        
                      </div>

                      <div class="itl">
                      	<div class="itlFlag flag-CN">
                      		<em></em>
                      	</div>
                      	
                      </div>

                        <div class="tips">
                            <span class="txt-tips">忘记密码时，可以通过手机号码找回密码</span>
                        </div>
                    </dd>
                </dl>

                 <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit" style="top: 23px;">
                        <span class="txt-impt">*</span>
                        验证码
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 196px; vertical-align: middle;"/>

                      <img src="assets/img/call.jpg" class="vcode">
                      <a href="#" class="switchCode">看不清楚？换张图片</a>
                        <div class="tips">
                            <span class="txt-tips">请填写图片中的字符，不区分大小写</span>
                        </div>
                    </dd>
                </dl>

                 <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit">
                        <span class="txt-impt">*</span>
                        短信验证码
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 322px;"/>

                        <div class="tips">
                            <span class="txt-tips">
                            	请查收手机短信，并填写短信中的验证码
                            </span>
                        </div>
                    </dd>
                </dl>
            </div>

            <div class="regForm" style="display: none;">


                <!--每一个dl 都是一个输入项-->
                <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit">
                        <span class="txt-impt">*</span>
                        手机号码
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 196px;"/>
                       <strong style="font-size: 14px;font-weight: 200px;">@</strong>
                       <select>
                           <option selected="selected">163.com</option>
                           <option>126.com</option>
                           <option>yeah.netk</option>
                       </select>
                       <div class="tips">
                            <span class="txt-tips">请填写手机号码</span>
                        </div>
                    </dd>
                </dl>



                   <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit" style="top: 23px;">
                        <span class="txt-impt">*</span>
                        图片验证码
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 196px; vertical-align: middle;"/>

                      <img src="assets/img/call.jpg" class="vcode">
                      <a href="#" class="switchCode">看不清楚？换张图片</a>
                        <div class="tips">
                            <span class="txt-tips">请填写图片中的字符，不区分大小写</span>
                        </div>
                    </dd>
                </dl>


                  <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit">
                        <span class="txt-impt">*</span>
                        短信验证码
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 322px;"/>

                        <div class="tips">
                            <span class="txt-tips">
                            	请查收手机短信，并填写短信中的验证码
                            </span>


               

                        </div>
                    </dd>
                </dl>




                <!--每一个dl 都是一个输入项-->
                <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit">
                        <span class="txt-impt">*</span>
                        密码
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 322px;"/>
                        <div class="tips">
                            <span class="txt-tips">6~16个字符，区分大小写</span>
                        </div>
                    </dd>
                </dl>

                <!--每一个dl 都是一个输入项-->
                <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit">
                        <span class="txt-impt">*</span>
                        确认密码
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 322px;"/>
                        <div class="tips">
                            <span class="txt-tips">请再次确认密码</span>
                        </div>
                    </dd>
                </dl>
            </div>

           
            <div class="regForm" style="display: none;">


                <!--每一个dl 都是一个输入项-->
                <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit">
                        <span class="txt-impt">*</span>
                        用户名
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 196px;"/>
                       <strong style="font-size: 14px;font-weight: 200px;">@</strong>
                      VIP.163.com

                       
                      
                       <div class="tips">
                            <span class="txt-tips">6~20个字母、数字、点、减号或下划线，需以字母开头</span>
                        </div>
                    </dd>
                </dl>

                   <!--每一个dl 都是一个输入项-->
                <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit">
                        <span class="txt-impt">*</span>
                        密码
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 322px;"/>
                        <div class="tips">
                            <span class="txt-tips">6~16个字符，区分大小写</span>
                        </div>
                    </dd>
                </dl>


                <dl class="regForm-item" style="display: none;">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit" style="top: 23px;">
                        <span class="txt-impt">*</span>
                        图片验证码
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 196px; vertical-align: middle;"/>

                      <img src="assets/img/call.jpg" class="vcode">
                      <a href="#" class="switchCode">看不清楚？换张图片</a>
                        <div class="tips">
                            <span class="txt-tips">请填写图片中的字符，不区分大小写</span>
                        </div>
                    </dd>
                </dl>

                 <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit">
                        <span class="txt-impt">*</span>
                        安全手机
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 322px;"/>
                        <div class="tips">
                            <span class="txt-tips">找回密码和认证时使用，不扣费</span>
                        </div>
                    </dd>
                </dl>


                <dl class="regForm-item">
                    <!--每一个dt都是一个表单提示-->
                    <dt class="regForm-item-tit">
                        <span class="txt-impt">*</span>
                        手机验证码
                    </dt>
                    <!--表单内容输入区--->
                    <dd class="regForm-item-ct">
                      <input type="text" class="ipt" style="width: 322px;"/>

                        <div class="tips">
                            <span class="txt-tips">
                            	请填写手机验证码，不区分大小写
                            </span>


               

                        </div>
                    </dd>
                </dl>




             

               
               
          
              
            </div>
          
    	</div>
    	<!--右侧图片广告区-->
    	<div class="mainside">
    		<div class="regExt">
    			<img src="assets/img/reg_master.gif">
    		</div>
    	</div>
    	
    </div>

    </section>	


  <script type="text/javascript">
  	
  	function switchPanel(){
  		/**调试**/
  		console.log('Hello javascript');
  		/**通过class名字查找文档对象**/
  		var div = document.querySelector('.itl');
  			/**查找选择面板**/
  		var panel = document.querySelector('.select_panel');

  		div.addEventListener('click',function(e){
  			var a =e.target;

  			
  			//panel.style.display='none'
  			if( panel.style.display=='none'){
  				panel.style.display='block'
  			}else{
  				panel.style.display='none';
  			}
	
	
  			console.log('我被点击了！');
  		});
  	};

  	function selectFlag(){
		console.log('我是selectFlag 函数');

		var links = document.querySelectorAll('.select_panel a')

    var phone= document.querySelector('#phone');
    	/**for循环**/
    for(i=0; i<links.length; i++){
    	/**绑定点击**/
      links[i].addEventListener('click',function(e){

        var a = e.target;
        /**pos:加号的位置**/
        var pos = a.innerText.indexOf('+');
        /**获取总长度**/
        var lth = a.innerText.length;

        var cno = a.innerText.substr(pos, lth-pos);
        				/**设置函数属性value值**/
        document.querySelector('#phone').setAttribute('value',cno);
        	/**获取a标签中的国旗样式**/
        var cls = a.className;
        	/**把a标签的国旗样式 赋值给输入框前面的div **/
        document.querySelector('.itlFlag').className = 'itlFlag '+ cls;


        console.log(cno);
      })
    }
	}


	function switchTab(){

		var tabs = document.querySelectorAll('.regTabs ul li a');
		var panels = document.querySelectorAll('.regForm');

		for (var i=0; i<tabs.length; i++){
			tabs[i].index = i;
			panels[i].index = i;
			tabs[i].addEventListener('click', function(e){
				var a = e.target;

				switch(a.index){
					case 1:
						console.log(a.index);
						document.querySelector('.regTabs ul').style.background='url(assets/img/tab.jpg) 0 -58px';
						document.querySelector('.regExt img').setAttribute('src','assets/img/reg_master.gif');

						break;
						
					case 2:
						console.log(a.index);
						document.querySelector('.regTabs ul').style.background='url(assets/img/tab.jpg) 0 -111px';
						document.querySelector('.regExt img').setAttribute('src','assets/img/reg_vip_163.gif');

						break;


					default:
					    console.log(a.index);
						document.querySelector('.regTabs ul').style.background='url(assets/img/tab.jpg) 0 0';
						document.querySelector('.regExt img').setAttribute('src','assets/img/reg_master.gif');

						
				}


				for(j=0;j<tabs.length;j++){
					tabs[j].style.color = '#000';
				}

				a.style.color = '#fff';


				for(t=0;t<panels.length;t++){

					panels[t].style.display='none';
				}
					panels[a.index].style.display='block';
				


				

				/*document.querySelector('.regTabs ul').style.background='url(assets/img/tab.jpg) 0 -'+a.index*55.3 +'px';

				console.log('......');*/
			})
		}
	}

	
	selectFlag();
  	switchPanel();
  	switchTab();
  </script>
 </body>
</html>